<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>SuperMap 地图信息</title>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" src="../../dist/include-mapboxgl.js"></script>
<script type="text/javascript">
    mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
    var host = window.isLocal ? document.location.protocol + "//" + document.location.host : "http://support.supermap.com.cn:8090";
    var url = host + "/iserver/services/map-world/rest/maps/World";
    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
        "| Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> " + " with <span>© <a href='http://iclient.supermapol.com' target='_blank'>SuperMap iClient</a></span>";
    var map = new mapboxgl.Map({
        container: 'map',
        style: {
            "version": 8,
            "sources": {
                "raster-tiles": {
                    "attribution": attribution,
                    "type": "raster",
                    "tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}'],
                    "tileSize": 256,
                },
            },
            "layers": [{
                "id": "simple-tiles",
                "type": "raster",
                "source": "raster-tiles",
                "minzoom": 0,
                "maxzoom": 22
            }]
        },
        center: [-74.50, 40],
        maxZoom: 18,
        zoom: 2
    });
    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
    map.addControl(new mapboxgl.NavigationControl(), 'top-left');

    map.on('load', function () {
        mapService();
    });

    function mapService() {
        var getMapStatusService = new SuperMap.MapService(url, {
            serverType: SuperMap.ServerType.ISERVER,
            eventListeners: {
                processCompleted: callback
            },
        });
        getMapStatusService.processAsync();
    }

    function callback(serviceResult) {
        var result = serviceResult.result;
        var innerHTML = "(map信息太多，只打印一部分)" + "<br><br>";
        innerHTML += "地图名：" + JSON.stringify(result.name) + "<br>";
        innerHTML += "中心点:" + JSON.stringify(result.center) + "<br>";
        innerHTML += "Bounds:" + JSON.stringify(result.bounds) + "<br>";
        new mapboxgl.Popup({closeOnClick: false})
            .setLngLat([-96, 37.8])
            .setHTML(innerHTML + "</br>")
            .addTo(map);
    }

</script>
</body>
</html>